<template>
  <a-menu
      theme="dark"
      mode="inline"
      :inline-collapsed="collapsed"
      :default-selected-keys="[11]"
      :default-open-keys="[1]"
      :open-keys="[curOpenKey]"
      :selected-keys="[curSelectKey]"
  >
    <template v-for="item of menuList" :key="item.id">
      <!-- 存在子菜单 -->
      <a-sub-menu v-if="item.childrenList" :key="item.id">
        <template #title>
          <a-icon :type="item.icon" />
          <span>{{ item.name }}</span>
        </template>
        <!-- 子菜单项 -->
        <a-menu-item
            v-for="child of item.childrenList"
            :key="child.id"
            @click="handleMenuItem(child.path)"
        >
          <a-icon :type="child.icon" />
          <span>{{ child.name }}</span>
        </a-menu-item>
      </a-sub-menu>
      <!-- 无子菜单的菜单项 -->
      <a-menu-item v-else :key="item.id" @click="handleMenuItem(item.path)">
        <a-icon :type="item.icon" />
        <span>{{ item.name }}</span>
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Menu as AMenu, SubMenu as ASubMenu, MenuItem as AMenuItem } from 'ant-design-vue'; // 假设使用 Ant Design Vue 4.x
import AIcon from 'ant-design-vue/es/icon'; // 导入 Icon 组件

// 定义 props
defineProps({
  collapsed: {
    type: Boolean,
    default: false,
  },
});

// 路由相关
const router = useRouter();
const route = useRoute();

// 菜单数据
const menuList = ref([
  {
    id: 1,
    icon: 'profile',
    name: '流程管理',
    path: '/manageFlow',
  },
  {
    id: 2,
    icon: 'profile',
    name: '流程编排',
    path: '/createFlow',
  },
]);

// 处理菜单点击
const handleMenuItem = (path) => {
  router.push({ path });
};

// 计算当前选中的菜单项 key
const curSelectKey = computed(() => {
  const path = route.path;
  let id = 1;

  if (path.includes('planRunDetail') || path.includes('planDetail')) {
    return 32;
  } else if (path.includes('/expertiseDetail')) {
    return 3;
  }

  menuList.value.forEach((obj) => {
    if (obj.path) {
      if (obj.path.includes(path)) {
        id = obj.id;
      }
    } else if (obj.childrenList) {
      obj.childrenList.forEach((child) => {
        if (path.includes('planAdd')) {
          if (child.path.includes('/planAdd')) {
            id = child.id;
          }
        } else if (child.path.includes(path)) {
          id = child.id;
        }
      });
    }
  });

  return id;
});

// 计算当前展开的菜单 key
const curOpenKey = computed(() => {
  const path = route.path;
  let id = 1;

  if (path.includes('planRunDetail') || path.includes('planDetail')) {
    return 3;
  } else if (path.includes('/expertiseDetail')) {
    return 3;
  }

  menuList.value.forEach((obj) => {
    if (obj.path) {
      if (obj.path.includes(path)) {
        id = obj.id;
      }
    } else if (obj.childrenList) {
      obj.childrenList.forEach((child) => {
        if (child.path.includes(path)) {
          id = obj.id;
        }
      });
    }
  });

  return id;
});
</script>

<style scoped>
</style>
